<template>
  <div class="container">
    <div class="title">服务数据</div>
    <div class="wrap" ref="wrap"></div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref, watch } from 'vue'
  import * as echarts from 'echarts'
  const props = defineProps<{
    data?: Array<object>
  }>()
  const wrap = ref(null)
  let chart:any = null;
  const renderChart = () => {
    if (!props.data) return
    const options = {
      grid: {
        top: 0,
        left: -26,
        right: 0,
        bottom: 0,
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          inverse: true,
          axisTick: {
            show: false // 不展示刻度
          },
          axisLabel: { // 坐标轴标签，就是左边的文字
            color: '#9eb1c8'
          },
          data: props.data.map((item:any) => item.name)
        }
      ],
      yAxis: [
        {
          show: false,
          type: 'value',
          max: function(value: {max: string}) {
            return parseInt(value.max) * 1.2
          }
        }
      ],
      series: [ // 真正展示图表形状的区域
        {
          data: props.data,
          type: 'bar',
          itemStyle: { // 柱子本身
            color: '#479ad3',
            barBorderRadius: 5,
            shadowColor: 'rgba(0,0,0,0.3)',
            shadowBlur: 5
          },
          barWidth: 12,
          label: { // 柱子文字
            show: true,
            position: 'top',
            textStyle: {
              color: '#fff'
            },
            formatter: '{c}%'
          }
        }
      ]
    }
    chart.setOption(options)
  }
  
  onMounted(() => {
    chart = echarts.init(wrap.value)
    renderChart()
  })

  watch(() => props.data, () => {
    renderChart()
  })
</script>

<style scoped>
  .container {
    flex: 1;
    padding: 6px;
    display: flex;
    flex-direction: column;
  }
  .title {
    color: #fff;
    font-size: 14px;
    font-weight: 550;
  }
  .wrap {
    flex: 1;
  }
</style>